<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const avatarUrl = computed(() => {
  const name = userStore.profile || 'default.webp'
  return `http://117.72.17.45:5500/data/profiles/${name}`
})
</script>

<template>
  <div class="profile-icon">
    <div class="layer bottom" :style="{ backgroundImage: `url(${avatarUrl})` }"></div>
    <div class="layer top"></div>
  </div>
  
</template>

<style scoped>
.profile-icon {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.layer {
  position: absolute;
  inset: 0;
}
.layer.bottom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.layer.top {
  /* 透明顶层，可放交互遮罩或边框 */
  background: transparent;
}
</style>


